// Η μέθοδος "xartosiaDOM" εμφανίζει τα φύλλα της χαρτωσιάς στη θέση που καθορίζεται
// ως πρώτη παράμετρος. Αν θέλουμε μπορούμε να περάσουμε και mouse event listeners
// για τα φύλλα τής χαρτωσιάς για τα "mouseenter", "mousleave" και "click" events
// με αυτή τη σειρά.

Xartosia.prototype.xartosiaDOM = function(thesi, enter, leave, click) {
	var filoklasi, fila, cont, i, filo;

	filoKlasi = 'filo filo' + thesi;
	if (this.fila.length > 10) filoKlasi += ' filo1Steno';
	fila = $('#tsoxaFila' + thesi).akrivosEna().empty();
	for (i = 0; i < this.fila.length; i++) {
		// Τα φύλλα δεν τοποθετούνται απευθείας, αλλά μέσα σε container divs.

		cont = $('<div>').data('filo', this.fila[i]).addClass(filoKlasi);
		if (this.fila[i].oxiKlisto()) cont.attr({id: 'FL' + this.fila[i]});

		// Το πρώτο φύλλο δεν «απανωτίζει» το προηγούμενο.

		if (!i) cont.addClass('filoProto');

		// Από το δεύτερο φύλλο και μετά υπάρχει περίπτωση να έχουμε ομοιόχρωμα
		// εφαπτόμενα φύλλα της διαφορετικής φυλής, π.χ. μπαστούνια/σπαθιά, ή
		// καρά/κούπες. Εκεί θα πρέπει να βοηθησουμε το διαχωρισμό και αυτό το
		// επιτυγχάνουμε με ελαφριά σκίαση έντονου χρωματισμού.

		else if ((this.fila[i].xroma != this.fila[i - 1].xroma) &&
			this.fila[i].omioxromo(this.fila[i - 1])) cont.addClass('filoOmioxromo');

		// Εντάσσουμε τώρα το φύλλο μέσα στο container div.

		filo = $('<img>').addClass('filoIcon').attr({
			src: 'images/trapoula/' + this.fila[i].xroma + this.fila[i].axia + '.png',
		}).appendTo(cont);

		// Προσθέτω το container div (μαζί με το φύλλο που περιέχει) στην
		// περιοχή φύλλων της συγκεκριμένης θέσης.

		cont.appendTo(fila);

		// Θα προσθέσω mouse event listeners μόνο στα φύλλα του νότου (θέση 1).

		if (thesi != 1) continue;

		// Τα mouse event listeners προστίθενται μόνο για τον παίκτη και όχι
		// για τους θεατές.

		if (Prefadoros.ego.oxiPektis()) continue;

		if (enter) filo.on('mouseenter', enter);
		if (leave) filo.on('mouseleave', leave);
		if (click) filo.on('click', click);
	}
}
